<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/teaWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学力管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看学力值</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <!--搜索框-->
      <el-col :span="6">
        <el-input placeholder="按学号查询" v-model="searchNum" class="input-with-select" @keyup.enter.native="searchData1">
          <el-button slot="append" icon="el-icon-search" @click="searchdata1"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <!-- 取消选择   -->
        <div>
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <!-- 发布警告   -->
        <div>
          <el-button @click="publish()">发布警告</el-button>
        </div>
      </el-col>
    </el-row>

    <!--表单模块-->
    <el-table :data="motives" highlight-current-row
              :default-sort = "{prop: 'week', order: 'ascending'}"
              ref='table' border stripe height="300" style="margin-top: 30px;"   tooltip-effect="dark"  @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55" align="center" fixed>
      </el-table-column>
      <el-table-column prop="motiveId" label="学力号"  align="center"></el-table-column>
      <el-table-column prop="couId" label="课程号" align="center" width="120"></el-table-column>
      <el-table-column prop="couName" label="课程名称" align="center" width="150"></el-table-column>
      <el-table-column prop="couTeacher" label="任课教师" align="center" width="120"></el-table-column>
      <el-table-column prop="stuNum" label="学号" align="center" width="120"></el-table-column>
      <el-table-column prop="week" label="周数" align="center" width="100"></el-table-column>
      <el-table-column prop="motive" label="学力值"  align="center" width="120">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            effect="dark"
            :class="scope.row.motive < predictRate ? 'low' : 'high'"
          >{{scope.row.motive}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="120">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-tag
            type="primary"
            effect="dark"
            @click="openupdate(scope.row)"
          >编辑
          </el-tag>
          <el-tag
            type="danger"
            effect="dark"
            @click="deleteMotive(scope.row.motiveId)"
          >删除
          </el-tag>
        </template>
      </el-table-column>

    </el-table>


    <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 编辑 -->
    <el-dialog title="编辑学力" :visible.sync="updatedialog" @close="closeupdate">
      <el-form :model="updateform"  ref="updateform" label-width="auto"  style="width:93%"
               class="demo-form-inline form">
        <el-form-item  label="学力号" >
          <el-input v-model="updateform.motiveId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="课程号" >
          <el-input v-model="updateform.couId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="课程名称" >
          <el-input v-model="updateform.couName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="任课教师" >
          <el-input v-model="updateform.couTeacher" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="学号" >
          <el-input v-model="updateform.stuNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="周数" >
          <el-input v-model="updateform.week" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="学力值" >
          <el-input v-model="updateform.motive" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatedialog = false">取 消</el-button>
        <el-button type="primary" @click="updateMotive">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  import { message } from "../../assets/js/resetMessage";
  export default {
    name:"motiveList",
    //绑定数据
    data() {
      return {
        motives:[],//注意使用表格时，pop属性对应的内容等价于后端数据传输的字段(键)
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        updatedialog:false,
        updateform:{//修改功能数据绑定
          motiveId:"",
          couId:"",
          couName:"",
          couTeacher:"",
          stuNum:"",
          week:"",
          motive:""
        },
        searchNum:"",
        // 学业预警峰值
        predictRate:"",
        // 选中的学生名单
        multipleSelection: [],
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.motiveList();
      this.selectRate();
    },
    methods:{
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.table.toggleRowSelection(row);
          });
        } else {
          this.$refs.table.clearSelection();
        }
      },
      // 将选中的值赋值给data中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val;
        let arr = this.multipleSelection;
        const uniqueArr = arr.filter((item, index, arr) => {
          return arr.findIndex(t => t.stuNum === item.stuNum) === index;
        });
        this.multipleSelection = uniqueArr;
      },
      // 通过课程id查询课程的权重信息，找到学业预警峰值
      selectRate(){
        // 获取课程号
        let couId = localStorage.getItem("couId");
        // 发起请求，获取权重
        axios.get(
          "http://localhost:1313/weight/selectWeightByCouId",
          {params:{couId:couId}}
        ).then((res)=>{
          // console.log(res)
          //将返回的学业预警峰值赋值给data数据
          this.predictRate = res.data.data.predictRate;
          console.log(this.predictRate)
        });
      },
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      //执行分页查询的函数
      motiveList(curpage = 1) {
        let couName = localStorage.getItem("couName");
        var motives=this;
        axios.get(
          "http://localhost:1313/motive/queryMotiveByPage",
          {params:{current:motives.curpage, rows: motives.pagesize,search:couName}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.motives = res.data.data.motives;
          this.total = res.data.data.total;
        });
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.motiveList();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.motiveList();
      },
      clearuseradd() {
        // 重置表单内容
        this.$refs.addform.resetFields();
      },
      openupdate(data){
        console.log(data)
        //打开模态框
        this.updatedialog=true;
        //数据回显
        this.updateform = data;
      },
      //修改学力值
      updateMotive() {
        var updateInfo = this;
        axios({
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          method:"post",
          url:"http://localhost:1313/motive/motiveUpdate",
          data:Qs.stringify(updateInfo.updateform)
        }).then((res)=>{
          if (res.data.code == 200) {
            this.$message({
              message:res.data.msg,
              type:"success"
            });
            this.updatedialog = false;
            this.motiveList();
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      //关闭修改的模态框
      closeupdate() {
        this.$refs.updateform.resetFields();
      },
      // 删除学力值
      deleteMotive(data){
        console.log(data)
        //询问窗口
        this.$confirm("是否删除该学生的学力值？","提示",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning",
        }).then(()=>{
          //发送请求到后端
          axios.get(
            "http://localhost:1313/motive/motiveDelete",
            {params:{motiveId:data}}
          ).then((res)=>{
            if (res.data.code == 200) {
              this.$message({
                type:"success",
                message:res.data.msg
              });
              this.curpage = 1;//重新设置当前页面
              this.motiveList();//刷新页面
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }).catch(()=>{
          this.$message({
            type:"info",
            message:"已取消删除"
          })
        })
      },
      // 根据学号 + 教授的课程完成查询
      motiveList1(){
        let couName = localStorage.getItem("couName");
        var motives=this;
        axios.get(
          "http://localhost:1313/motive/queryMotiveByStuCouNamePage",
          {params:{current:motives.curpage,rows: motives.pagesize,stuNum:motives.searchNum,search:couName}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.motives = res.data.data.motives;
          this.total = res.data.data.total;
        });
      },
      searchdata1(){
        this.curpage = 1;
        this.motiveList1();
        this.searchNum ="";
      },
      // 按下回车键实现搜索
      searchData1(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata1();
        }
      },
      // 发布警告
      publish(){
        // 向学力值低于学业预警峰值的同学发出警告，督促他们好好学习
        let arr = this.multipleSelection;
        arr.forEach(item => {
          // console.log(item.stuNum);
          // console.log(item.couName);
          // 发起axios请求，实现发布警告
          axios({
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            method:"post",
            url:"http://localhost:1313/warning/warningInsert",
            data:Qs.stringify({stuNum:item.stuNum,couId:item.couId,couName:item.couName,week:item.week,publisher:item.couTeacher})
          }).then((res)=>{
            // console.log(res)
            if (res.data.code == 200) {
              //1.提示消息，是否录入成功
              message({
                message: res.data.msg,
                type:"success",
              });
            } else {
              message.error(res.data.msg)
            }
            // 清空选择
            this.toggleSelection();
          })

        })

      },
    }
  }

</script>

<style>
  /*设置高于学业预警峰值的类样式*/
  .high{
    width: 45px;
    height: 35px;
    color: #fff;
    background-color: #13ce66;
    text-align: center;
    line-height: 35px;
  }
  .low{
    width: 45px;
    height: 35px;
    color: #fff;
    background-color: #ff4949;
    text-align: center;
    line-height: 35px;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
